<template>
  <div id="videolist" class="page-full-screen">
    <div>
      <el-button @click="searchshow = !searchshow">搜索&nbsp;<i class="iconfont icon-zhankai" :class="{active: searchshow === true}" style="font-size: 12px"></i></el-button>
    </div>
    <el-collapse-transition>
      <div v-show="searchshow">
        <div class="main-box">
          <span>昵称</span>
          <el-input
                  placeholder="请输入昵称"
                  size="mini"
                  prefix-icon="el-icon-search"
                  v-model="searchmsg.nickname">
          </el-input>
          <span style="margin-left: 20px"><el-button size="mini" @click="search">确定</el-button></span>
        </div>
      </div>
    </el-collapse-transition>
    <msg-list :tableData="tableData" :title="title" :btntype="btntype" :pagesall="parseInt(pagesall)" :pages="parseInt(page)" @getselect="getselect" @changepage="changepage1" @getid="getid1"></msg-list>
    <el-dialog
            title="设置"
            :visible.sync="centerDialogVisible"
            width="60%"
            center>
      <div class="inputcl">
        <span class="layer-list-title img-list">评论框状态:</span>
        <span class="imgupload">
          <el-radio-group v-model="setTypeEnabled">
            <el-radio label="1">可用</el-radio>
            <el-radio label="0">不可用</el-radio>
          </el-radio-group>
          </span>
      </div>
      <div class="clear"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="postType">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
            title="内容"
            :visible.sync="centerDialogVisible1"
            width="60%"
            center>
      <con :content="content"></con>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible1 = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import msgbox from '../../common/msgbox.js'
  import config from '../../common/config'
  import MsgList from '../public/msgList'
  import editor from '../../assets/editor/content'
  import ImgUpload from '../public/imgUpload'
  import con from '../../assets/editor/content'

  export default {
    components: {
      ImgUpload,
      MsgList,
      con,
      editor: editor},
    name: 'questions',
    data () {
      return {
        setType: {
          id: 0,
          enabled: ''
        },
        page: 1,
        enabled: 0,
        setTypeEnabled: 0,
        btntype: ['回复状态', '查看回复内容'],
        pagesall: 0,
        content: {},
        type: true,
        deletes: {
          ids: [],
          reason: ''
        },
        searchmsg: {
          nickname: ''
        },
        delshow: false,
        searchshow: false,
        title: [
          {
            prop: 'id',
            label: 'id'
          },
          {
            prop: 'comment_content_id',
            label: '评论内容id'
          },
          {
            prop: 'user_id',
            label: '用户id'
          },
          {
            prop: 'nickname',
            label: '用户昵称'
          },
          {
            prop: 'to_user',
            label: '回复用户id'
          },
          {
            prop: 'to_user_nickname',
            label: '回复用户昵称'
          },
          {
            prop: 'add_time',
            label: '添加时间'
          },
          {
            prop: 'enabled',
            label: '是否可用'
          }
        ],
        tableData: [],
        tid: 0,
        getmsg: {},
        centerDialogVisible: false,
        centerDialogVisible1: false
      }
    },
    mounted () {
      this.search()
    },
    methods: {
      search () { // 搜索获取数据
        let that = this
        this.$g.ajax({
          path: 'commentReplys/getCommentReplies',
          method: 'post',
          data: {
            comment_content_id: this.$route.params.id,
            nickname: this.searchmsg.nickname,
            page: this.page
          },
          cbSuccess: function (data) {
            that.tableData = data.memo.list
            that.pagesall = parseInt(data.memo.pageTotal)
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      },
      changepage1 (page) { // 更改page
        this.page = page
        this.search()
      },
      getid1 (val) { // 获取列表button信息
        let that = this
        if (val.btn === '删除') {
          this.tid = val.val.id
        }
        if (val.btn === '回复状态') {
          that.setType.id = val.val.id
          if (val.val.enabled === '可用') {
            that.setTypeEnabled = '1'
          } else {
            that.setTypeEnabled = '0'
          }
          that.centerDialogVisible = true
        }
        if (val.btn === '查看回复内容') {
          this.content = val.val.content
          this.centerDialogVisible1 = true
        }
      },
      postType () {
        let that = this
        this.setType.enabled = this.setTypeEnabled
        this.$g.ajax({
          path: 'commentReplys/setCommentReply',
          method: 'post',
          data: that.setType,
          cbSuccess: function (data) {
            that.$message.success('操作成功')
            that.search()
            that.centerDialogVisible = false
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      },
      getselect (vals) { // 获取多选id
        this.deletes.ids = []
        for (let i in vals) {
          this.deletes.ids.push(vals[i].id)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-view{
    display: flex;
    margin-bottom: 10px;
    .cont{
      margin-left: 10px;
    }
  }
  .active{
    display: inline-block;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
  }
  #videolist {
    .main-box{
      margin-top: 20px;
      span{
        margin-right: 30px;
        font-size: 14px;
        font-weight: 700;
        color: #606266;
      }
      .el-input {
        width: 240px;
      }
    }
    .main-box {
      .el-radio__inner {
        background: red;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color: #00a4a0!important;
      }
    }
    .layer {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 999;
      overflow: hidden;
      .mask {
        background: rgba(153, 153, 153, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
      }
      .imgcontent {
        text-align: center;
        img {
          position: relative;
          max-width: 80%;
          max-height: 80%;
          background: #fff;
          margin: 5% auto;
          z-index: 3;
        }
      }
      .content {
        position: relative;
        width: 60%;
        max-height: 80%;
        background: #fff;
        margin: 5% auto;
        z-index: 2;
        padding: 30px;
        overflow: scroll;
        .close {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
        }
        .inputcl {
          margin-top: 20px;
          .layer-list-title {
            display: inline-block;
            width: 80px;
            margin-left: 15px;
            margin-right: 10px;
            float: left;
            vertical-align: middle;
            line-height: 28px;
          }
          .img-list {
            vertical-align: top;
            float: left;
            line-height: 18px;
          }
          .imgupload {
            display: block;
            margin-left: 105px;
          }
          .el-input {
            max-width: 200px;
          }
          img {
            width: 320px;
            height: 240px;
          }
        }
        .title {
          text-align: center;
          font-size: 18px;
          font-weight: bold;
        }
        .doit .one .el-input {
          width: 200px;
          margin-left: 20px;
        }
        .doit .one {
          margin-top: 20px;
          font-size: 14px;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
          position: relative;
          left: -4px;
        }
        .buttons {
          margin-top: 20px;
          text-align: center;
          button {
            margin: 0 20px;
          }
        }
      }
    }
  }
  .inputcl {
    margin-top: 20px;
    .layer-list-title {
      display: inline-block;
      width: 80px;
      margin-left: 15px;
      margin-right: 10px;
      float: left;
      vertical-align: middle;
      line-height: 28px;
    }
    .img-list {
      vertical-align: top;
      float: left;
      line-height: 18px;
    }
    .imgupload {
      display: block;
      margin-left: 105px;
    }
    .el-input {
      max-width: 200px;
    }
    img {
      width: 320px;
      height: 240px;
    }
  }
</style>
<style>
  .el-button:focus, .el-button:hover{
    color: #00a4a0;
  }
  .el-button:active{
    border-color: #00a0a0;
  }
  .el-button{
    padding: 8px 14px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #00a4a0;
    border-color: #00a4a0;
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
  #videolist .el-textarea__inner {
    resize: none;
  }
</style>
